<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <template v-for="(content, index) in contentList" :key="index">
      <el-breadcrumb-item v-if="index === 0" @click="itemClick" :to="{ path: '/' }">{{content}}</el-breadcrumb-item>
      <el-breadcrumb-item v-else>{{content}}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export type contentType = '首页' | '商品管理' | '商品列表' | '参数列表' | '商品分类' | '订单管理' | '订单列表' | '权限管理' | '角色列表' | '权限列表' | '用户管理' | '用户列表' | '数据统计' | '数据报表' | '编辑商品' | '添加商品'

export default defineComponent({
  name: 'XBreadcrumb',
  props: {
    contentList: {
      type: Array as PropType<contentType[]>,
      required: true
    }
  },
  setup () {
    const itemClick = () => {
      window.sessionStorage.setItem('activePath', '/')
    }
    return { itemClick }
  }
})
</script>
